<template>
<div :class="[{ 'input-item-active': isFocus }, { 'input-item-error': error }, 'input-item']">
  <div class="label" >{{ label }}</div>
  <div style="display: flex">
  <select
      @change="handleLeftSelectChange($event.target.value)"
      :value="value.slice(0,1)"
      style="width: 40%"
  >
    <option>男</option>
    <option>女</option>
  </select>
  <select
      @change="handleRightSelectChange($event.target.value)"
      :value="value.slice(1)"
      @focus="isFocus = true"
      @blur="handleBlur"
      style="width: 50%;margin-left: 10%;"
  >
<!--    <option>{{ selectPlaceholder }}</option>-->
    <option v-for="option in options" :key="option.value || option" :value="option.value || option">
      {{ option.name || option }}
    </option>
  </select>
  </div>
</div>
</template>

<script>
export default {
  name: "IntelInput",
  props: {
    error: {
      type: Boolean,
      default: false
    },
    value: {
      type: String,
      default: null
    },
    placeholder: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    },
    options: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      isFocus: false,
      leftValue: '男',
      rightValue: '',
      selectPlaceholder: '选择尺寸'
    }
  },
  watch: {
    value (val) {
      this.leftValue = val.slice(0,1)
      this.rightValue = val.slice(1)
    }
  },
  methods: {
    handleLeftSelectChange (val) {
      this.leftValue = val
      this.$emit('change', `${this.leftValue}${this.rightValue}`)
    },
    handleRightSelectChange (val) {
      if (val === this.selectPlaceholder) {
        this.rightValue = ''
      } else {
        this.rightValue = val
      }
      this.$emit('change', `${this.leftValue}${this.rightValue}`)
    },
    handleBlur () {
      this.$emit('blur')
      this.isFocus = false
    },
    handleChange (e) {
      console.log(e)
    }
  }
}
</script>

<style scoped>
.input-item {
  height: 60px;
  min-width: 300px;
  border: 1px solid #D7D7D7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 14px 20px;
}
.input-item-active {
  border: 1px solid #0068B5;
}
.label {
  font-size: 14px;
  color: #999999;
}
.input-item-active .label {
  color: #0068B5;
}
select {
  border: none;
  background: none;
  font-size: 14px;
  color: #333333;
}
select:focus {
  outline: none;
}
input::placeholder {
  font-size: 14px;
  color: #333333;
}
.input-item-error {
  border: 1px solid #FF4D4F;
}
.input-item-error .label {
  color: #FF4D4F;
}
</style>
